<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenHarmony Insight Review Lite - 显示效果测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .test-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 15px 0;
            color: #333;
        }
        .btn {
            background: #0366d6;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }
        .btn:hover {
            background: #0256cc;
        }
        .description {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>OpenHarmony Insight Review Lite - 显示效果测试</h1>

        <div class="test-section">
            <h2 class="test-title">测试说明</h2>
            <p class="description">
                此页面用于测试修复后的模态框显示效果。主要修复内容：
            </p>
            <ul>
                <li>模态框尺寸优化：宽度从800px增加到900px，使用95vw单位</li>
                <li>内容溢出处理：添加垂直滚动，优化文本换行</li>
                <li>表格显示优化：添加水平滚动容器，固定表头，列宽控制</li>
                <li>代码片段优化：等宽字体，水平滚动，语法高亮背景</li>
                <li>响应式设计：移动端适配</li>
            </ul>
        </div>

        <div class="test-section">
            <h2 class="test-title">模拟测试数据</h2>
            <p class="description">
                点击下面的按钮显示不同类型的测试数据：
            </p>
            <button class="btn" onclick="showPrimaryReview()">显示主要审核结果</button>
            <button class="btn" onclick="showSecondaryReview()">显示深度审查结果</button>
            <button class="btn" onclick="showLargeTable()">显示超长表格</button>
            <button class="btn" onclick="clearModal()">清除模态框</button>
        </div>

        <div class="test-section">
            <h2 class="test-title">修复前后对比</h2>
            <p class="description">
                <strong>修复前问题：</strong>
            </p>
                <ul>
                    <li>模态框宽度固定800px，内容容易溢出</li>
                    <li>表格没有水平滚动，长文件名和问题描述会被截断</li>
                    <li>代码片段没有等宽字体和语法高亮背景</li>
                    <li>没有响应式设计，移动端体验差</li>
                </ul>
            <p class="description">
                <strong>修复后改进：</strong>
            </p>
                <ul>
                    <li>模态框宽度增加到900px，使用95vw单位</li>
                    <li>表格添加滚动容器，固定表头，列宽优化</li>
                    <li>代码片段使用专门的CSS类，更好的可读性</li>
                    <li>完整的响应式设计，移动端友好</li>
                </ul>
        </div>
    </div>

    <!-- 注入用户脚本的样式 -->
    <script>
        // 注入用户脚本的CSS样式
        const style = document.createElement('style');
        style.textContent = `
            .llm-modal-overlay {
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0,0,0,0.6); z-index: 9999; display: flex;
                align-items: center; justify-content: center; padding: 20px;
                box-sizing: border-box;
            }
            .llm-modal-content {
                background: #f8f9fa; padding: 0; border-radius: 8px; width: 900px;
                max-width: 95vw; max-height: 90vh; overflow: hidden; display: flex;
                flex-direction: column; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            }
            .llm-modal-header {
                display: flex; justify-content: space-between; align-items: center;
                padding: 12px 20px; border-bottom: 1px solid #dee2e6; background: #fff;
                flex-shrink: 0;
            }
            .llm-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
            .llm-modal-body {
                padding: 20px;
                overflow-y: auto;
                flex-grow: 1;
                min-height: 0;
                word-wrap: break-word;
                overflow-x: hidden;
            }
            .llm-summary-card {
                padding: 15px; border: 1px solid #ddd; border-radius: 6px;
                background-color: #fff; margin-bottom: 20px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            .llm-assessment {
                padding: 5px 12px; border-radius: 15px; color: white;
                font-weight: bold; display: inline-block; font-size: 14px;
            }
            .llm-feedback-card {
                background: #fff; border: 1px solid #e9ecef; border-radius: 6px;
                margin-bottom: 12px; padding: 15px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            .llm-feedback-card-header {
                font-weight: 600; display: flex; align-items: center; gap: 8px;
                flex-wrap: wrap;
            }
            .llm-feedback-card-header span { font-weight: normal; margin-left: auto; }
            .llm-feedback-card-comment {
                margin: 8px 0 0 5px;
                color: #495057;
                word-wrap: break-word;
                overflow-wrap: break-word;
                white-space: pre-wrap;
            }

            /* 优化表格显示 */
            .llm-findings-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 13px;
                min-width: 800px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            .llm-findings-table th,
            .llm-findings-table td {
                padding: 6px 8px;
                text-align: left;
                border-bottom: 1px solid #e9ecef;
                vertical-align: top;
                max-width: 200px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            .llm-findings-table th {
                font-weight: 600;
                background-color: #f8f9fa;
                position: sticky;
                top: 0;
                z-index: 1;
            }
            .llm-findings-table code {
                background-color: #f1f3f4;
                padding: 2px 4px;
                border-radius: 3px;
                font-size: 12px;
                word-break: break-all;
                display: inline-block;
                max-width: 100%;
            }
            .llm-findings-table .issue-text,
            .llm-findings-table .suggestion-text {
                white-space: pre-wrap;
                word-wrap: break-word;
                overflow-wrap: break-word;
                line-height: 1.4;
            }

            /* 表格容器 */
            .llm-table-container {
                overflow-x: auto;
                margin: 10px 0;
                border: 1px solid #e9ecef;
                border-radius: 6px;
                max-height: 400px;
                overflow-y: auto;
            }

            /* 代码片段优化 */
            .llm-code-snippet {
                background-color: #212529;
                color: #f8f9fa;
                padding: 10px;
                border-radius: 4px;
                overflow-x: auto;
                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
                font-size: 12px;
                line-height: 1.4;
                white-space: pre;
                word-wrap: normal;
                overflow-wrap: normal;
            }

            /* 响应式优化 */
            @media (max-width: 768px) {
                .llm-modal-content {
                    width: 95vw;
                    max-height: 95vh;
                }
                .llm-modal-body {
                    padding: 15px;
                }
                .llm-findings-table th,
                .llm-findings-table td {
                    padding: 4px 6px;
                    font-size: 12px;
                }
            }
        `;
        document.head.appendChild(style);

        function showModal(content) {
            // 移除现有模态框
            document.getElementById('test-modal')?.remove();

            const modalHTML = `
                <div id="test-modal" class="llm-modal-overlay">
                    <div class="llm-modal-content">
                        <div class="llm-modal-header">
                            <h3>🤖 OpenHarmony Insight Review Lite - 测试</h3>
                            <button onclick="clearModal()" style="cursor: pointer; border: none; background: none; font-size: 18px;">❌</button>
                        </div>
                        <div class="llm-modal-body">${content}</div>
                    </div>
                </div>`;
            document.body.insertAdjacentHTML('beforeend', modalHTML);
        }

        function showPrimaryReview() {
            const content = `
                <div class="llm-summary-card">
                    <p style="margin: 0 0 10px 0;">
                        <span class="llm-assessment" style="background-color: #28a745;">
                            Sufficient
                        </span>
                    </p>
                    <p style="margin: 0;"><strong>摘要:</strong> 这是一个很好的PR实现，代码质量很高。</p>
                </div>
                <div class="llm-feedback-card">
                    <div class="llm-feedback-card-header">
                        ✅ <strong>标题与描述</strong>
                        <span>优秀</span>
                    </div>
                    <p class="llm-feedback-card-comment">PR标题清晰明确，描述提供了充分的上下文信息。</p>
                </div>
                <div class="llm-feedback-card">
                    <div class="llm-feedback-card-header">
                        ✅ <strong>与Issue的关联性</strong>
                        <span>优秀</span>
                    </div>
                    <p class="llm-feedback-card-comment">PR完全解决了Issue中提到的核心问题。</p>
                </div>
            `;
            showModal(content);
        }

        function showSecondaryReview() {
            const content = `
                <div class="llm-summary-card">
                    <p style="margin: 0 0 10px 0;">
                        <span class="llm-assessment" style="background-color: #ffc107;">
                            needs_attention
                        </span>
                    </p>
                    <p style="margin: 0;"><strong>摘要:</strong> 代码总体质量良好，但有一些需要注意的地方。</p>
                </div>
                <div class="llm-feedback-card">
                    <div class="llm-feedback-card-header">
                        <strong>JavaScript · src</strong>
                        <span style="color: #ffc107;">Medium</span>
                    </div>
                    <p class="llm-feedback-card-comment">代码逻辑清晰，建议加强错误处理。</p>
                </div>
                <div class="llm-summary-card">
                    <h4 style="margin: 0 0 8px 0; font-size: 15px;">🔍 专业审核发现</h4>
                    <div class="llm-table-container">
                        <table class="llm-findings-table">
                            <thead>
                                <tr>
                                    <th style="width: 140px;">文件</th>
                                    <th style="width: 70px;">行区间</th>
                                    <th style="width: 80px;">严重级别</th>
                                    <th style="width: 90px;">类别</th>
                                    <th style="width: 250px;">问题描述</th>
                                    <th style="width: 250px;">修复建议</th>
                                    <th style="width: 90px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>src/components/very-long-component-name-that-might-overflow.js</code></td>
                                    <td>L15-L27</td>
                                    <td style="color: #dc3545; font-weight: 600;">High</td>
                                    <td style="color: #dc3545; font-weight: 600;">🔒 Security</td>
                                    <td class="issue-text">缺少输入验证可能导致运行时错误和XSS攻击</td>
                                    <td class="suggestion-text">添加参数类型检查、输入清理和边界条件处理</td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <button
                                            class="llm-submit-review-btn"
                                            data-index="0"
                                            data-file="src/components/very-long-component-name-that-might-overflow.js"
                                            data-line="L15-L27"
                                            data-issue="缺少输入验证可能导致运行时错误和XSS攻击"
                                            data-suggestion="添加参数类型检查、输入清理和边界条件处理"
                                            data-category="Security"
                                            data-severity="High"
                                            style="padding: 6px 10px; font-size: 12px; background-color: #0366d6; color: white; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; width: 100%;"
                                            title="提交为PR检视意见"
                                            onclick="alert('💬 这是演示模式，在实际PR页面中可以直接提交检视意见到GitCode')">
                                            💬 提交意见
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><code>src/utils/helper.js</code></td>
                                    <td>L42</td>
                                    <td style="color: #fd7e14; font-weight: 600;">Medium</td>
                                    <td style="color: #fd7e14; font-weight: 600;">🛡️ Reliability</td>
                                    <td class="issue-text">函数复杂度过高，异常处理不完善</td>
                                    <td class="suggestion-text">将函数拆分为多个小函数，添加try-catch错误处理</td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <button
                                            class="llm-submit-review-btn"
                                            data-index="1"
                                            data-file="src/utils/helper.js"
                                            data-line="L42"
                                            data-issue="函数复杂度过高，异常处理不完善"
                                            data-suggestion="将函数拆分为多个小函数，添加try-catch错误处理"
                                            data-category="Reliability"
                                            data-severity="Medium"
                                            style="padding: 6px 10px; font-size: 12px; background-color: #0366d6; color: white; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; width: 100%;"
                                            title="提交为PR检视意见"
                                            onclick="alert('💬 这是演示模式，在实际PR页面中可以直接提交检视意见到GitCode')">
                                            💬 提交意见
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><code>src/api/service.js</code></td>
                                    <td>L120-L135</td>
                                    <td style="color: #6f42c1; font-weight: 600;">Medium</td>
                                    <td style="color: #6f42c1; font-weight: 600;">🏗️ Architecture</td>
                                    <td class="issue-text">API调用逻辑耦合度较高，违反单一职责原则</td>
                                    <td class="suggestion-text">将API调用逻辑抽象为独立服务层，提高可维护性</td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <button
                                            class="llm-submit-review-btn"
                                            data-index="2"
                                            data-file="src/api/service.js"
                                            data-line="L120-L135"
                                            data-issue="API调用逻辑耦合度较高，违反单一职责原则"
                                            data-suggestion="将API调用逻辑抽象为独立服务层，提高可维护性"
                                            data-category="Architecture"
                                            data-severity="Medium"
                                            style="padding: 6px 10px; font-size: 12px; background-color: #0366d6; color: white; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; width: 100%;"
                                            title="提交为PR检视意见"
                                            onclick="alert('💬 这是演示模式，在实际PR页面中可以直接提交检视意见到GitCode')">
                                            💬 提交意见
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><code>src/config/constants.js</code></td>
                                    <td>L8</td>
                                    <td style="color: #20c997; font-weight: 600;">Low</td>
                                    <td style="color: #20c997; font-weight: 600;">✨ Quality</td>
                                    <td class="issue-text">变量命名不规范，缺少文档注释</td>
                                    <td class="suggestion-text">采用驼峰命名法，添加JSDoc注释说明用途</td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <button
                                            class="llm-submit-review-btn"
                                            data-index="3"
                                            data-file="src/config/constants.js"
                                            data-line="L8"
                                            data-issue="变量命名不规范，缺少文档注释"
                                            data-suggestion="采用驼峰命名法，添加JSDoc注释说明用途"
                                            data-category="Quality"
                                            data-severity="Low"
                                            style="padding: 6px 10px; font-size: 12px; background-color: #0366d6; color: white; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; width: 100%;"
                                            title="提交为PR检视意见"
                                            onclick="alert('💬 这是演示模式，在实际PR页面中可以直接提交检视意见到GitCode')">
                                            💬 提交意见
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style="margin-top: 10px; font-size: 12px; color: #6c757d;">
                        <p><strong>审核维度说明:</strong></p>
                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 5px;">
                            <div>🔒 <strong>Security</strong>: 安全性相关 (输入验证、权限控制、数据泄露等)</div>
                            <div>🛡️ <strong>Reliability</strong>: 可靠性相关 (错误处理、边界条件、资源管理等)</div>
                            <div>🏗️ <strong>Architecture</strong>: 架构设计相关 (代码结构、设计模式、接口设计等)</div>
                            <div>✨ <strong>Quality</strong>: 代码质量相关 (编码规范、测试覆盖、可读性等)</div>
                        </div>
                        <p style="margin-top: 10px;"><strong>💡 新功能:</strong> 点击 "💬 提交意见" 按钮可直接将检视意见提交到PR的对应代码行。</p>
                    </div>
                </div>
            `;
            showModal(content);
        }

        function showLargeTable() {
            let rows = '';
            const files = [
                'src/very/long/path/to/component/file/that/might/overflow/the/table/column/component.jsx',
                'src/utils/another/very/long/file/name/that/could/cause/display/issues/util.js',
                'src/services/api/service/with/long/path/name/service.js',
                'src/components/form/validator/helper/utils.js',
                'src/config/development/environment/settings.js'
            ];

            for (let i = 0; i < 15; i++) {
                const file = files[i % files.length];
                rows += `
                    <tr>
                        <td><code>${file}_${i}</code></td>
                        <td>L${10 + i * 5}-L${15 + i * 5}</td>
                        <td style="color: ${i % 3 === 0 ? '#dc3545' : '#ffc107'}; font-weight: 600;">${i % 3 === 0 ? 'High' : 'Medium'}</td>
                        <td class="issue-text">这是一个非常长的问题描述，用来测试表格单元格的内容溢出处理。当问题描述很长时，应该能够正确换行显示而不会破坏布局。</td>
                        <td class="suggestion-text">这是一个同样很长的修复建议，用来测试表格在不同内容长度下的显示效果。建议应该能够正确换行，提供完整的解决方案说明。</td>
                    </tr>
                `;
            }

            const content = `
                <div class="llm-summary-card">
                    <p style="margin: 0 0 10px 0;">
                        <span class="llm-assessment" style="background-color: #dc3545;">
                            critical
                        </span>
                    </p>
                    <p style="margin: 0;"><strong>摘要:</strong> 大量代码问题需要处理，包含长文件路径和描述。</p>
                </div>
                <div class="llm-summary-card">
                    <h4 style="margin: 0 0 8px 0; font-size: 15px;">重点问题 - 大量测试数据</h4>
                    <div class="llm-table-container">
                        <table class="llm-findings-table">
                            <thead>
                                <tr>
                                    <th style="width: 180px;">文件</th>
                                    <th style="width: 100px;">行区间</th>
                                    <th style="width: 100px;">严重级别</th>
                                    <th style="width: 250px;">问题</th>
                                    <th style="width: 250px;">建议</th>
                                </tr>
                            </thead>
                            <tbody>${rows}</tbody>
                        </table>
                    </div>
                </div>
            `;
            showModal(content);
        }

        function clearModal() {
            document.getElementById('test-modal')?.remove();
        }
    </script>
</body>
</html>